<template>
	<view class="container">
		<view class="header">
			<view class="">
				<uni-icons type="left" size="30" @click="reTurn"></uni-icons>
			</view>
			<view class="">
				<uni-icons type="redo" size="30"></uni-icons>
			</view>
		</view>
		<view class="main">
			<image class="jingdian1" src="/static/imagess/jingdian1.png" mode=""></image>
			<view class="info">
				<view class="title">
					<h3>故宫博物馆</h3>
					<span class="dengji">5A</span>
				</view>
				<view class="site">
					<view class="site-rating">
						<span class="si">4.8分</span>
						<span class="dian">15635条点评></span>
					</view>
					<view class="site-rating2">
						<span class="xiangce" @click="go‌Photo">相册</span>
						<span class="xiangce">|</span>
						<span class="xiangce">游记</span>
					</view>
				</view>
				<view class="two">
					<!-- 左侧信息 -->
					<view class="left" @click="goDetail">
						<view class="left-info">

							<h4 class="status">开园中</h4>
							<view class="date-time-container">
								<span class="date">今日（周五）</span>
								<span class="time">08:30-16:30 开放</span>
							</view>
						</view>


						<span class="detail-button">景点 <br /> 详情</span>
						<uni-icons type="right" size="15"></uni-icons>
					</view>

					<!-- 右侧信息 -->
					<view class="right">
						<view class="right-info">
							<span class="address">北京市东城区景山前街4号</span>
							<span class="address2">距地铁1号线八通线...</span>
						</view>
						<view class="map">
							<uni-icons type="location-filled" size="25"></uni-icons>
							<span style="font-size: 12px;">地图</span>
						</view>

					</view>
				</view>

				<button class="gg-button" size="mini" @click="toggle('bottom')">
					<view class="button-info">
						<p class="gg">
							<uni-icons class="uni-info" style="color: red;font-size: 20px;" type="info" size="30">
							</uni-icons>
							公告：入园公告
						</p>
						<uni-icons style=" font-size: 20px;" type="right" size="30"></uni-icons>

					</view>

				</button>

				<hr class="xian" />
				<view class="date-picker">
					<p class="date-p">订今日</p>
					<p class="date-p active">订明日</p>
					<p class="date-p">订11月27日</p>
					<p class="date-p more">更多日期 ></p>
				</view>
			</view>
			<view class="ticket">
				<h3>门票</h3>
				<p style="margin-top:5px;color:#FF9900;font-size: 13px;">
					优待政策 >
				</p>
				<p style="margin-top:10px;color:#ccc;font-size: 13px;">累计销量5.1万+</p>
				<view class="card">
					<uni-card class="card-q">
						<view class="card-title">
							<h4 style="color: black;font-size: 32rpx;">故宫门票（不含内馆）-成人票</h4>
							<p class="card-price">
								￥<span style="font-size:25px ;">40</span>
							</p>
						</view>
						<view class="card-num">
							年龄18周岁（不含）~60周岁（不含）... >
						</view>
						<view class="card-info">
							<view class="card-status">
								<p style="margin-bottom: 10px;"><span style="color: #4BB58D;">有条件退</span> |
									<span>无需取票</span>
								</p>
								<p><span>已售2.2万+</span> | <span>购买须知 ></span></p>
							</view>
							<button class="mini-btn" type="primary" size="mini">立即预订</button>
						</view>
					</uni-card>
					<uni-card class="card-q">
						<view class="card-title">
							<h4 style="color: black;font-size: 32rpx;">故宫门票（不含内馆）-老人票</h4>
							<p class="card-price">
								￥<span style="font-size:25px ;">20</span>
							</p>
						</view>
						<view class="card-num">
							年龄60周岁（含）以上... >
						</view>
						<view class="card-info">
							<view class="card-status">
								<p style="margin-bottom: 10px;"><span style="color: #4BB58D;">有条件退</span> |
									<span>无需取票</span>
								</p>
								<p><span>已售1.2万+</span> | <span>购买须知 ></span></p>
							</view>
							<button class="mini-btn" type="primary" size="mini">立即预订</button>
						</view>
					</uni-card>
					<uni-card class="card-q">
						<view class="card-title">
							<h4 style="color: black;font-size: 32rpx;">故宫门票（不含内馆）-学生票</h4>
							<p class="card-price">
								￥<span style="font-size:25px ;">20</span>
							</p>
						</view>
						<view class="card-num">
							大学生（含港、澳、台学生；不含成）... >
						</view>
						<view class="card-info">
							<view class="card-status">
								<p style="margin-bottom: 10px;"><span style="color: #4BB58D;">有条件退</span> |
									<span>无需取票</span>
								</p>
								<p><span>已售1.6万+</span> | <span>购买须知 ></span></p>
							</view>
							<button class="mini-btn" type="primary" size="mini">立即预订</button>
						</view>
					</uni-card>
					<uni-card class="card-q">
						<view class="card-title">
							<h4 style="color: black;font-size: 29rpx;">故宫门票(不含内馆)-未成年票</h4>
							<p style="color: #10AF86;">
								免费预约
							</p>

						</view>


					</uni-card>
				</view>


			</view>
		</view>
		<view class="footer">
			<view class="foot-input">
				<uni-icons type="search" size="30"></uni-icons>
				<input type="text" placeholder="写评论..." />
			</view>
			<view class="foot-icon">
				<uni-icons style="color:#1992F2 ;" type="heart-filled" size="30"></uni-icons>
				已收藏
			</view>
			<button class="foot-btn" type="primary">
				<uni-icons style="color:#fff ;" type="up"></uni-icons>
				前往预订</button>
		</view>
	</view>
	<!-- <view class="popup-content"> -->
	<!-- 普通弹窗 -->
	<uni-popup class="uni-popup" ref="popup" @change="change">
		<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
			<view class="popup-info">
				<view class="pop-title">
					<h1></h1>
					<p style="font-size: 20px;">景区公告</p>
					<uni-icons type="closeempty" size="30"></uni-icons>
				</view>
				<h3 style="margin:  10px 0;">出行公告</h3>
				<h4 style="margin:  20px 0;">北京市内游重要信息提醒</h4>
				<p style="margin:  20px 0;">北京近日发布重要疫情防控措施提醒：“进返京人员抵京后
					7天内不聚餐、不聚会、不前往人群密集场所”，进入文
					旅场所(室内场所)时须满足“7天内无京外旅居史”。所有
					出京旅行及自驾游人员返京要主动报备，进返京后开展3
					天2检。请您密切关注，其他常态化疫情防控措施具体如下：</p>

				<p style="margin:  20px 0;">1、北京市暂不恢复进出京跨省团队旅游及“机票+酒店”
					业务，继续暂停出入境团队旅游及“机票+酒店”业务。北
					京市内团队游等旅游活动旅行社和在线旅游平台可以开
					展但不接受京外游客报名，参加团队旅游人员（含游
					客、导游、司机、随团其他工作人员等全口径参团人
					员）应完成新冠疫苗全程接种或加强免疫接种（全程接
					种六个月以上的，应提供加强免疫接种证明）。其中：
					不满3周岁的未成年人参团可不提供新冠疫苗接种证明；
					3周岁以上不满18周岁的未成年人参团应提供新冠疫苗
					全程接种证明，不必提供加强免疫接种证明；18周岁以
					上的成年人参团应完成新冠疫苗全程接种或加强免疫接
					种（全程接种六个月以上的，应提供加强免疫接种证
					明），不适宜接种人员可凭北京“健康宝”中禁忌筛查判
					定证明（显示不适宜接种）参团。（温馨提示：据悉，
					北京各疫苗接种点已开展禁忌筛查判定工作，详情可询
					疫苗接种点或疾控部门。）</p>

				<p style="margin:  20px 0;"> 2、除跟团游玩外采取其他方式在北京游玩的，请注意：
					市民群众在严格测温扫码和查验48小时内核酸检测阴性
					证明后即可正常进入市内各类公共场所。</p>
				<p style="margin:  20px 0;"> 3、7天内有1例及以上本土新冠病毒感染者所在县
					（市、区、旗，下同）旅居史人员严格限制进返京。</p>
				<p style="margin:  20px 0;">4、根据当前国内疫情形势，继续执行远端筛查措施，除
					严格限制进返京人员外有进返京计划的旅客，持48小时
					内核酸检测阴性证明、“北京健康宝”绿码，在测温正常
					且做好个人防护的前提下可正常进返京，抵京24小时
					后、72小时内进行1次核酸检测。</p>

				<p style="margin:  20px 0;">上述重要信息请您务必留意，并同时密切关注我们发布
					的《关于疫情常态化下出行重要信息提醒》严格遵照执
					行，感谢您的理解与配合，谢谢。</p>

				<h4 style="margin:  20px 0;">疫情期间出行必读</h4>
				<p style="margin:  20px 0;"> 1、故宫博物院按照75%限流要求恢复开放。入院观众须
					持有48小时核酸检测阴性证明，配合测温和健康宝查验。</p>
				<p style="margin:  20px 0;"> 2、根据北京市防疫政策“进返京人员抵京后7天内不聚
					餐，不聚会，不前往人员密集场所”，无京外7天以内旅
					居史，无高风险地区7天以内旅居史的游客方可购票入院。</p>


			</view>
		</view>
	</uni-popup>
	<!-- </view> -->
</template>

<script setup>
	const reTurn = () => {
		uni.navigateBack();
	}
	const toggle = () => {
		this.type = type
		// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
		this.$refs.popup.open(type)
	}

	const goDetail = () => {
		uni.navigateTo({
			url: '/pages/detail/detail' // 页面路径，必须以 '/' 开头
		});
	}


	const go‌Photo = () => {
		uni.navigateTo({
			url: "/pages/photo/photo"
		})
	}
</script>

<style>
	.footer {
		height: 50px;
		display: flex;
		padding: 5px 10px;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		bottom: 0;
	}

	.foot-btn {
		border-radius: 10px;
		margin: 0;
	}

	.foot-input {
		width: 45%;
		display: flex;
		align-items: center;
		border-radius: 20px;

		padding: 5px;

		background-color: #F5F5F5;
	}

	.foot-icon {
		display: flex;
		flex-direction: column;

	}

	.pop-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.popup-info {
		/* background-color: #09A1F1; */
		height: 70%;
	}

	.uni-popup__wrapper bottom {
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
		/* background: #05B892; */
	}



	.popup-content {
		padding: 10px;

		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
		height: 400px;
		background-color: white;

		overflow: auto;
		/* height: 100%; */
		flex: 1;
	}

	.gg {
		display: flex;
		align-items: center;
		color: red;
	}

	.button-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.gg-button {

		width: 100%;
		/* height: 30px; */
		background-color: #FFF1F1;
		margin: 10px 0;
		/* line-height: none; */

	}

	.uni-card[data-v-ae4bee67] {
		border-radius: 10px;
	}

	.mini-btn {
		border-radius: 20px;
		line-height: none;
		margin: 0;
	}

	.card-info {
		width: 100%;
		margin-top: 10px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.card-num {
		font-size: 13px;
	}

	.card-price {
		font-size: 15px;
		color: red;
	}

	.card-title {
		display: flex;
		justify-content: space-between;
	}

	.ticket {

		flex: 1;
		background-color: #F4F9FF;
		padding: 10px;
		border-top-right-radius: 20px;
		border-top-left-radius: 20px;
		margin-bottom: 80rpx;
	}



	.date-picker {
		margin-top: 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.date-p {
		background-color: #F5F5F5;
		padding: 5px;
		border-radius: 20px;
	}





	.two {
		margin-top: 10px;
		display: flex;
		justify-content: space-between;
	}

	.arrow {
		color: #ccc;
	}


	.left {
		background-color: #EEF9F7;
		width: 48%;
		display: flex;
		align-items: center;
		border-radius: 10px;
		padding: 5px;
		margin-right: 5px;
		justify-content: space-around;
	}

	.right {
		width: 48%;
		background-color: #EEF2FD;
		display: flex;
		align-items: center;
		border-radius: 10px;
		padding: 5px;
	}

	.right-info {
		display: flex;
		flex-direction: column;
	}

	.address {
		font-size: 13px;
	}

	.address2 {
		font-size: 12px;
		color: #ccc;
	}

	.map {
		width: 20%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.status {
		color: #05B892;
	}

	.date,
	.time {
		font-size: 12px;
	}

	.detail-button {
		font-size: 12px;
		color: #34B7FB;
	}



	.left {
		display: flex;
	}

	.container {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		overflow: auto;
	}

	.header {
		height: 50px;
		/* color: white; */
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		z-index: 99;
		position: fixed;
		top: 5;
	}

	.main {
		width: 100%;
		flex: 1;
		overflow: auto;
	}

	.footer {

		height: 50px;
		background-color: white;
	}

	.jingdian1 {
		width: 100%;
		z-index: -99;


	}

	.info {
		z-index: 99;

		background-color: white;
		padding: 10px;
		border-top-right-radius: 20px;
		border-top-left-radius: 20px;
		margin-top: -15px;
	}

	.title {
		display: flex;
		align-items: center;
	}

	.dengji {
		margin: 0 10px;
		padding: 0 5px;
		background-color: aliceblue;
		color: #ccc;
		border-radius: 5px;
	}

	.site {
		display: flex;
		margin-top: 10px;
		align-items: center;
	}

	.site-rating {
		margin-right: 10px;
		font-size: 13px;
	}



	.site-rating2 {
		font-size: 13px;
		background-color: #EBF6FF;
		color: #34B7FB;
		border-radius: 20px;
		padding: 3px 5px;
	}

	.xiangce {
		padding: 5px;
	}

	.si {
		background-color: #09A1F1;
		color: white;
		border-top-left-radius: 20px;
		border-bottom-left-radius: 20px;
		padding: 3px 5px;
	}

	.dian {
		background-color: #EBF6FF;
		color: #34B7FB;
		border-top-right-radius: 20px;
		border-bottom-right-radius: 20px;
		padding: 3px 5px;
	}

	.date-time-container {
		display: flex;
		flex-direction: column;
	}
</style>